<template>
  <div class="list-page">
    <a-spin :spinning="loading">
      <div class="top-active">
        <div class="top-search">
          <a-input-search
            placeholder="请输入内容"
            enter-button="搜索"
            @search="search"
          />
        </div>
        <div class="btn">
          <a-button @click="addVisible = true" type="primary" icon="plus"
            >新增</a-button
          >
        </div>
      </div>
      <div class="table-box">
        <a-table
          :columns="columns"
          :data-source="source"
          bordered
          :rowKey="(record, index) => index"
        >
          <div slot="cz" slot-scope="text, record">
            <a-button size="small" icon="edit" @click="edit(record)"
              >编辑</a-button
            >
            <a-button size="small" icon="delete">删除</a-button>
          </div>
        </a-table>
      </div>
    </a-spin>
    <a-modal
      v-model="addVisible"
      title="新增人物规范"
      :width="800"
      :maskClosable="false"
      :footer="null"
      class="yp-modal"
    >
      <div class="add-form">
        <template>
          <a-form-model
            ref="ruleForm"
            :model="form"
            :rules="rules"
            :label-col="labelCol"
            :wrapper-col="wrapperCol"
          >
            <a-form-model-item ref="name" label="姓名" prop="name">
              <a-input v-model="form.name" style="width: 200px" />
            </a-form-model-item>
            <a-form-model-item ref="scn" label="生卒年" prop="scn">
              <a-range-picker
                format="YYYY-MM-DD"
                valueFormat="YYYY-MM-DD"
                :locale="locale"
                v-model="form.scn"
              />
            </a-form-model-item>
            <a-form-model-item ref="jg" label="籍贯" prop="jg">
              <a-input v-model="form.jg" style="width: 200px" />
            </a-form-model-item>
            <a-form-model-item ref="gz" label="官职" prop="gz">
              <a-input v-model="form.gz" style="width: 200px" />
            </a-form-model-item>
            <a-form-model-item ref="zh" label="字号" prop="zh">
              <a-input v-model="form.zh" style="width: 200px" />
            </a-form-model-item>
            <a-form-model-item ref="xz" label="小传" prop="xz">
              <a-textarea v-model="form.xz" />
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="onSubmit"> 新增 </a-button>
              <a-button style="margin-left: 10px" @click="resetForm">
                重置
              </a-button>
              <a-button style="margin-left: 10px" @click="addVisible = false">
                取消
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </template>
      </div>
    </a-modal>
  </div>
</template>

<script>
import locale from "ant-design-vue/es/date-picker/locale/zh_CN";
export default {
  name: "home",
  data() {
    return {
      locale,
      loading: false,
      addVisible: false,
      columns: [
        {
          title: "姓名",
          dataIndex: "name",
          key: "name",
        },
        {
          title: "籍贯",
          dataIndex: "jg",
          key: "jg",
        },
        {
          title: "官职",
          dataIndex: "gz",
          key: "gz",
        },
        {
          title: "字号",
          dataIndex: "zh",
          key: "zh",
        },
        {
          title: "成就",
          dataIndex: "cj",
          key: "cj",
        },
        {
          title: "生卒年",
          dataIndex: "scn",
          key: "scn",
        },
        {
          title: "小传",
          dataIndex: "xz",
          key: "xz",
        },
        {
          title: "操作",
          dataIndex: "cz",
          key: "cz",
          scopedSlots: { customRender: "cz" },
        },
      ],
      source: [
        {
          id: 12430,
          name: "名称",
          jg: "江苏",
          scn: ["1923-12-05", "2023-12-05"],
          gz: "官职",
          xz: "小传",
          zh: "鈐印本",
          cj: "松蔭軒藏印譜文獻",
        },
      ],
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      other: "",
      form: {
        name: "",
        csn: undefined,
        jg: undefined,
        gz: undefined,
        zh: undefined,
        cj: "",
        xz: "",
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur",
          },
          {
            min: 1,
            max: 15,
            message: "姓名1-13个字",
            trigger: "blur",
          },
        ],
        jg: [
          {
            required: true,
            message: "请输入籍贯",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    edit(record) {
      this.form = record;
      this.addVisible = true;
    },
    init() {
      console.log(111);
    },
    search() {
      console.log(111);
    },
    fileChange(e) {
      console.log(e);
      this.addStep = 2;
    },
    onSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          console.log(this.form);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>
